<script setup lang="ts">
import ChinaIndex from './components/ChinaIndex.vue'
import CashFlow from './components/CashFlow.vue'
import DeclineIncrease from './components/DeclineIncrease.vue'
import SecuritiesNews from './components/SecuritiesNews.vue'
import NewStock from './components/NewStock.vue'
import { ref, onMounted, onBeforeUnmount } from 'vue'

const nowTime = ref<string>('')

/**
 * 将小于10的数字前面补0
 * @function
 * @param {number} value
 * @returns {string} 返回补0后的字符串
 */
const complement = (value: number): string => {
  return value < 10 ? `0${value}` : value.toString()
}

/**
 * 格式化时间为MM-DD HH:mm:ss
 * @function
 * @returns {string} 返回格式化后的时间
 */
const formatDate = (): string => {
  const time = new Date()
  const month = complement(time.getMonth() + 1)
  const day = complement(time.getDate())
  const hour = complement(time.getHours())
  const minute = complement(time.getMinutes())
  const second = complement(time.getSeconds())
  return `${month}-${day} ${hour}:${minute}:${second}`
}

let timer: number

onMounted(() => {
  // Time update
  nowTime.value = formatDate()
  timer = window.setInterval(() => {
    nowTime.value = formatDate()
  }, 1000)
})

onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<template>
  <div class="app">
    <div class="header">
      <div class="time">{{ nowTime }}</div>
      <div class="title">证券分时数据监控系统</div>
    </div>
    <div class="content">
      <div class="left">
        <ChinaIndex /><NewStock /><CashFlow /><DeclineIncrease />
      </div>
      <div class="right"><SecuritiesNews /></div>
    </div>
  </div>
</template>

<style scoped>
.app {
  height: 101vh;
  width: 100%;
  background: url('./assets/bg.png');
  background-size: 100% 100%;
  .header {
    height: 6%;
    .time {
      float: left;
      font-family: UnidreamLED;
      font-style: italic;
      font-weight: 100;
      letter-spacing: 0.1em;
      width: 15%;
      color: white;
      text-align: center;
      height: 100%;
      font-size: 18px;
      line-height: 50px;
    }
    .title {
      float: left;
      width: 20%;
      height: 100%;
      margin-left: 25%;
      text-align: center;
      font-size: 20px;
      background: linear-gradient(
        to bottom,
        #ffffff,
        rgb(32, 101, 215) 50%
      ); /* 渐变效果 */
      -webkit-background-clip: text;
      color: transparent;
      font-family: 'MyCustomFont', sans-serif; /* 使用自定义字体 */
      font-weight: bold;
    }
  }
  .content {
    display: flex;
    width: 100%;
    height: 93%;
    .left {
      width: 75%;
      height: 100%;
      display: flex;
      /* 自动换行 */
      flex-wrap: wrap;
    }
    .right {
      width: 24%;
      height: 100%;
    }
  }
}
</style>
